<template>
	<div class="train">
		<trainHeader name="选择保险"></trainHeader>
		<div class="trainInsurance">
			<div v-for="item in insuranceList" class="trainInsurance_box" @click="select(item)">
				<div>
					<div class="trainInsurance_name">
						<span>{{item.name}} ￥{{item.highestPrice}}/人</span>
						<div @click.stop="details(item.description)">
							<img src="http://h5.kpcx179.com/wximages/train/xiangqing@2x.png" v-if="item.productId != 1"/>
						</div>
					</div>
					<div class="trainInsurance_message">
						<span>{{item.name}}</span>
						<span v-if="item.insureDesc">|{{item.specialNote}}</span>
					</div>
				</div>
				<div class="trainInsurance_pic">
					<img src="http://h5.kpcx179.com/wximages/train/xuanzhong.png" alt="" v-if="item.productId == insuranceId"/>
					<img src="http://h5.kpcx179.com/wximages/train/weixuanzhong.png" alt="" v-else/>
				</div>
			</div>
		</div>
	</div>
</template>
<style scoped>
	.trainInsurance {
		padding: 20px;
	}

	.trainInsurance_box {
		padding: 20px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		align-items: center;
	}
	
	.trainInsurance_pic {
		width: 35px;
		height: 35px;
	}
	
	.trainInsurance_pic > img {
		width: 100%;
		height: 100%;
	}
	
	.trainInsurance_name {
		font-size:32px;
		color:#444;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.trainInsurance_name > div > img {
		width: 30px;
		height: 30px;
		margin-left: 10px;
	}
	
	.trainInsurance_message {
		margin-top: 22px;
		font-size:24px;
		color:#8a8a8a;
	}
</style>
<script>
	import trainHeader from "../../../components/trainHeader";
	export default {
		name: "trainInsurance",
		data() { //数据
			return {
				insuranceId:"",//选择的保险Id
				insuranceList:[],//保险列表
			}
		},
		mounted() {
			this.insuranceId = this.$route.query.insuranceId;
			this.getList();
		},
		created() {
			
		},
		methods: {
			getList(){ //获取保险
				this.$loading.show();
				var param = {
//					userID: this.$store.state.common.userinfo.userID,
//					type: this.ticketType ? "7" : "3",
//					cityId: this.startCity,
				};
//				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/getInsurances", param).then((res) => {
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/getInsurances51", param).then((res) => {
					this.$loading.hide();
//					console.log(res);
					if(res.data.Code == "0") {
						var obj = {
				          name: '无需保险',
				          price: 0,
				          productId:1,
				          highestPrice:0,
				       	};
				       res.data.Result.insList.push(obj);
				       this.insuranceList = res.data.Result.insList;
					} else {
						this.$toast(res.data.msg, {
							durtaion: 200,
							location: 'center',
						});
					};
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			details(message){//保险详情
				this.$router.push({
					name: 'trainInsuranceTip',
					params: {
						message, //保险信息
					},
				});
			},
			select(item){
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));//上页面状态
				(item.id == this.insuranceId) ? this.checked(item,trainStore) : this.change(item,trainStore);
			},
			checked(item,trainStore){ //去掉选中
				trainStore.fillOrder.insurance.name = "";//保险信息清空
				trainStore.fillOrder.insurance.id = "";
				trainStore.fillOrder.insurance.price = 0;
				trainStore.fillOrder.insurance.highestPrice = 0;
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
			change(item,trainStore){ //选中保险
				if(item.disabled) return;
				trainStore.fillOrder.insurance.name = item.name;//保险信息
				trainStore.fillOrder.insurance.id = item.productId;
				trainStore.fillOrder.insurance.price = item.price;
				trainStore.fillOrder.insurance.highestPrice = item.highestPrice;
				this.$store.commit('TRAINSTORE', trainStore);
				this.$router.go(-1);
			},
		},
		filters : {
			fix(num){
				return Number(num).toFixed(2);
			}
		},
		components: {
			trainHeader
		},
	};
</script>
